<template>
  <n-pagination
      v-model:page="page"
      v-model:page-size="pageSize"
      :item-count="total"
      :show-size-picker="showpagepicker"
      :page-sizes="pageSizeResult"
      :on-update:page="huidiao1"
      :on-update:page-size="huidiao2"
  />
</template>

<script setup>
import {useRoute, useRouter} from "vue-router";

const router = useRouter()
const route = useRoute()
const page = ref(1)
const pageSize = ref(20)
const props = defineProps({
  pageSizes:{
    type:Array,
    default:[],
  },
  showpagepicker:{
    type:Boolean,
    default:true,
  },
  total:{
    type:Number || String,
    default:1
  },
})
const emit = defineEmits(["change"])
const pageSizes = [
  {
    label: '10 每页',
    value: 10
  },
  {
    label: '20 每页',
    value: 20
  },
  {
    label: '30 每页',
    value: 30
  },
  {
    label: '40 每页',
    value: 40
  },
  {
    label: '50 每页',
    value: 50
  }
]
const pageSizeResult=computed(()=>{
  return props.pageSizes.length > 0? props.pageSizes:pageSizes
})
// 修改页码回调
const huidiao1=(pageindex)=>{
  page.value = pageindex
  emit("change",{page:page.value,pageSize:pageSize.value})
}
const huidiao2=(pagesizenum)=>{
  pageSize.value = pagesizenum
  page.value = 1
  emit("change",{page:page.value,pageSize:pageSize.value})
}
// 父组件修改接口
const changeoption=(fenye)=>{
  if(fenye.page){
    page.value = fenye.page
  }
  if(fenye.pageSize){
    pageSize.value = fenye.pageSize
  }
  emit("change",{page:page.value,pageSize:pageSize.value})
}
// 抛出接口
defineExpose({changeoption,page,pageSize})
// 生命周期区域
onMounted(()=>{
  emit("change",{page:page.value,pageSize:pageSize.value})
})
</script>

<style scoped>

</style>